<template>
<div class="phone-popup" >
  <wd-overlay :show="show" zIndex="20"  @click="show=false">
    <div class="popup-content">
      <view class="phone-list">
        <view class="phone-item" v-for="item in 3" @click.stop="callPhone">
          <text class="phone-item__role">设计师</text>
          <text class="phone-item__phone">15817885855</text>
        </view>
      </view>
      <view class="cancel-popup" @click="show=false">
        <text class="cancel-popup__text">取消</text>
      </view>
    </div>
  </wd-overlay>
</div>
</template>
<script setup>
import {ref} from  "vue"
const show = defineModel()
const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: '15817885855'
  });
}
</script>
<style scoped lang="scss">
 .phone-popup{
    .popup-content{
      position: fixed;
      left: 0rpx;
      right: 0rpx;
      margin: 32rpx;
      bottom: 0rpx;
   }
    .phone-list{
      background: #fff;
      border-radius: 20rpx;
      .phone-item{
        height: 110rpx;
        line-height: 110rpx;
        margin: 0rpx 32rpx;
        font-size: 32rpx;
        display: grid;
        grid-template-columns: 1fr 2fr;
        border-bottom: 2rpx solid #E7E7E7;
        &__role{
          color: #191919;
        }
        &__phone{
          color: #606266;
        }
        &:last-child{
          border: none;
        }
      }
    }
   .cancel-popup{
     background: #fff;
     border-radius: 20rpx;
     padding: 26rpx 0rpx;
     font-size: 32rpx;
     margin-top: 20rpx;
     text-align: center;
     color: #4E5969;
   }
 }
</style>